<template>
    <!-- 搜索框 -->
    <el-card style="margin: 20px;height:100%;">
        <el-form :inline="true">
            <el-form-item label="申请人" style="width: 270px;">
                <el-input placeholder="请输入"
                          v-model="searchUserForm.name" @keydown.enter="loadUser"></el-input>
            </el-form-item>
            <el-form-item label="申请部门" style="width: 290px;">
                <el-select placeholder="请选择"
                           v-model="searchUserForm.department" @keydown.enter="loadUser">
                    <el-option label="产品研发部" value="产品研发部"></el-option>
                    <el-option label="销售部" value="销售部"></el-option>
                    <el-option label="行政部" value="行政部"></el-option>
                    <el-option label="财务部" value="财务部"></el-option>
                    <el-option label="采购部" value="采购部"></el-option>
                    <el-option label="人力资源部" value="人力资源部"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职级" style="width: 290px;">
                <el-select placeholder="请选择"
                           v-model="searchUserForm.level" @keydown.enter="loadUser">
                    <el-option label="普通员工" value="普通员工"></el-option>
                    <el-option label="主管" value="主管"></el-option>
                    <el-option label="经理" value="经理"></el-option>
                    <el-option label="总监" value="总监"></el-option>
                    <el-option label="总裁" value="总裁"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" style="width: 290px;">
                <el-select placeholder="请选择"
                           v-model="searchUserForm.reviewStatus" @keydown.enter="loadUser">
                    <el-option label="待审批" value="待审批"></el-option>
                    <el-option label="驳回" value="驳回"></el-option>
                    <el-option label="已通过" value="已通过"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadUser">搜索</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>





        <!--新建弹窗-->
        <hr>
        <el-button type="primary" style="float:left;margin-top:10px;"
                   @click="beforeAddUser">➕ 新增员工入职</el-button>
        <el-dialog v-model="dialog" title="新增员工" width="30%"
                   :before-close="handleClose">
            <el-form  label-width="80px" label-position="top">
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="工号*">
                            <el-input v-model="repairSaveForm.userId" placeholder="请输入工号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="姓名*">
                            <el-input v-model="repairSaveForm.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门*">
                            <el-select v-model="repairSaveForm.department" placeholder="请输入部门信息">
                              <el-option label="产品研发部" value="产品研发部"></el-option>
                              <el-option label="销售部" value="销售部"></el-option>
                              <el-option label="行政部" value="行政部"></el-option>
                              <el-option label="财务部" value="财务部"></el-option>
                              <el-option label="采购部" value="采购部"></el-option>
                              <el-option label="人力资源部" value="人力资源部"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="职级*">
                            <el-select v-model="repairSaveForm.level" placeholder="请选择职级">
                              <el-option label="普通员工" value="普通员工"></el-option>
                              <el-option label="主管" value="主管"></el-option>
                              <el-option label="经理" value="经理"></el-option>
                              <el-option label="总监" value="总监"></el-option>
                              <el-option label="总裁" value="总裁"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="入职日期*">
                            <el-date-picker v-model="repairSaveForm.entryTime" type="datetime" placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="30">
                    <el-col >
                        <el-form-item label="备注*" width="100%" height="100%">
                            <el-input v-model="repairSaveForm.remark" placeholder="请输入备注信息" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="repairSave">提交</el-button>
                <el-button @click="handleClose">返回</el-button>
            </template>
        </el-dialog>










        <!--  表单  -->
        <el-table :data="userArr">
            <el-table-column label="申请人" prop="name" width="80" align="center"></el-table-column>
            <el-table-column label="申请部门" prop="department" align="center">
            </el-table-column>
            <el-table-column label="职级" prop="level" align="center">
            </el-table-column>
            <el-table-column label="入职日期" prop="entryTime" align="center"></el-table-column>
            <el-table-column label="状态" align="center">
                <template #default="{row}">
                    {{ statusMap[row.reviewStatus] || row.reviewStatus }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
                <template #default="scope">
                    <el-button type="primary" link
                               @click="auditing(scope.row.id)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog  title="流程表单" v-model="dialogVisible">
            <el-descriptions direction="horizontal" :column="2" border>
                <el-descriptions-item label="姓名">{{searchUserForm.name}}</el-descriptions-item>
                <el-descriptions-item label="部门">{{searchUserForm.department}}</el-descriptions-item>
                <el-descriptions-item label="职级">{{searchUserForm.level}}</el-descriptions-item>
                <el-descriptions-item label="入职日期">{{searchUserForm.entryTime}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{searchUserForm.remark}}</el-descriptions-item>
                <template #footer>
                    <el-button @click="handleClose">返回</el-button>
                </template>
            </el-descriptions>
        </el-dialog>
    </el-card>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import qs from "qs";


// 定义映射关系
const departmentMap = { '1': '研发部', '2': '业务销售部' };
const positionMap = { '10': '熬夜冠军', '20': '游戏大师', '30': '肥仔', '40': '机器人', '50': '人机'};
const statusMap = { '1': '待审批', '2': '已拒绝', '3': '已通过' };
//定义弹窗是否出现
const dialogVisible = ref(false);
//定义弹窗是否出现
const dialog = ref(false);
//定义弹窗关闭的方法
const handleClose = () => {
    if(confirm('您是否要关闭本弹窗?')){
        dialog.value = false;
        dialogVisible.value = false;
    }
}


//定义加载数据表单的方法
const loadUser = () => {
    console.log("loadUser method called with searchUserForm:", searchUserForm.value); // 添加调试日志
    let data = qs.stringify(searchUserForm.value);
    console.log("Request data:", data); // 添加调试日志
    axios.get(BASE_URL + '/v1/personnel/select?'+data)
        .then((response) => {
            if (response.data.code == 2000) {
                userArr.value = response.data.data;
                console.log("-------------------", userArr.value);
            } else {
                ElMessage.error(response.data.msg);
            }
        })
}
//定义数组用于员工查询搜索
const searchUserForm = ref({
  name:'',
  department:'',
  level:'',
  reviewStatus:'',
  type:'入职'
});

//保存用户数据并存入员工卡片
const userArr = ref([]);

//一进到页面立即加载所有数据
onMounted(() => {
    resetSearch();
    loadUser();
})
//定义重置搜索的方法
const resetSearch = () => {
    searchUserForm.value = {name:'',department:'',level:'',reviewStatus:'',type:'入职'};
    loadUser();
}

//编辑点击查看详情的方法
const auditing = (id)=>{
    dialogVisible.value = true;
    axios.get(BASE_URL+'/v1/personnel/select?id='+id).then((response)=>{
        if (response.data.code == 2000) {
            searchUserForm.value = response.data.data[0];
        }else{
            ElMessage.error(response.data.msg);
        }
    })
}





/******************************************************************************************/
// //获取当前登录的用户信息
// const user = ref(getUser());
//定义保存车辆表单数据的对象
const repairSaveForm= ref({
    userId:'',
    name:'',
    department:'',
    level:'',
    entryTime:'',
    remark:'',
    type:'入职'
});
//定义保存车辆的方法
const repairSave = ()=>{
    if(!repairSaveForm.value.userId){
      ElMessage.error('请输入工号!');
      return;
    }
    if(!repairSaveForm.value.name || repairSaveForm.value.name.trim()==''){
        ElMessage.error('请输入员工名字!');
        return;
    }
    if(!repairSaveForm.value.entryTime){
        ElMessage.error('请输入入职时间!');
        return;
    }
    if (!repairSaveForm.value.department){
        ElMessage.error('请输入部门!');
        return;
    }
    if (!repairSaveForm.value.level){
        ElMessage.error('请输入职级!');
        return;
    }
    console.log(repairSaveForm.value);
    let data = repairSaveForm.value;
    axios.post(BASE_URL+'/v1/personnel/insert/',data).then((response)=>{
        if(response.data.code == 2000){
            ElMessage.success('提交成功!');
            dialog.value = false;//关闭弹窗
            repairSaveForm.value = {
              userId:'',
              name:'',
              department:'',
              level:'',
              entryTime:'',
              remark:'',
              type: '入职'};//清空表单
            resetSearch();//新增成功后,需要重新加载数据!
        }else{
            ElMessage.error('请确认信息是否录入完毕!');
        }
    })
}
//定义添加用户的方法
const beforeAddUser = ()=>{
    dialog.value = true;
};



</script>

<style>

</style>